<template>
	<view class="user-mine">
		<view class="background"></view>
		<view class="info">
			<view class="top-banner"></view>
			<!-- 用户信息 -->
			<view class="user">
				<image src="https://img1.baidu.com/it/u=2633326196,676668628&fm=253&fmt=auto&app=138&f=JPEG?w=483&h=475"
					mode="" class="user-img"></image>
				<view class="user-info">
					<view class="user-name"><span>昵 称：</span> {{userInfo.nickName}} </view>
					<view class="span"><span>角 色：</span><view v-for="item in userInfo.roles">{{item.roleName}}</view></view>
					<view class="user-phone"><span>手机号：</span> {{userInfo?.phonenumber == '' ? '暂无电话号码' : userInfo.phonenumber}}</view>
				</view>
			</view>
			<!-- 所属公司 -->
			<view class="company">
				<text>{{userCompany}}</text>
			</view>
			<!-- 更多 -->
			<view class="more">
				<view class="more-item" v-for="(item, index) in moreList" :key="index" @click="moreHandler(item)">
					<view class="item-left">
						<up-icon :name="item.icon" class="item-icon" size="42rpx"></up-icon>
						<view class="item-label">{{item.name}}</view>
					</view>
					<view class="item-right">
						<up-icon name="arrow-right"></up-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		UserInfo
	} from '@/api/User.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		removeToken
	} from '@/utils/auth.js'
	let userInfo = reactive({})
	let userCompany = ref()
	const moreList = reactive([{
			name: '关于我们',
			icon: '/punlic/image/mine/about.png'
		},
		{
			name: '使用帮助',
			icon: '/punlic/image/mine/help.png'
		},
		{
			name: '联系我们',
			icon: '/punlic/image/mine/callmy.png'
		},
		{
			name: '服务协议',
			icon: '/punlic/image/mine/protocol.png'
		},
		{
			name: '退出登录',
			icon: '/punlic/image/mine/back.png'
		},
	])
	onShow(() =>{
		getUserInfo()
	})
	onLoad(() => {
		// getUserInfo()
	})
	const getUserInfo = () => {
		UserInfo().then(res => {
			if (res.code == 200) {
				Object.assign(userInfo, res.user)
				console.log(userInfo,'userInfo');
				if (res.maintainCompany && res.maintainCompany.companyName !== '') {
					userCompany.value = res.maintainCompany.companyName
				} else {
					userCompany.value = '暂未关联公司'
				}
			}
		})
	}

	const moreHandler = (item) => {
		switch (item.name) {
			case '关于我们':
				uni.navigateTo({
					url: '/pages/about/index'
				})
				break;
			case '使用帮助':
				uni.navigateTo({
					url: '/pages/buyAgreement/index'
				})
				break;
			case '联系我们':
				uni.navigateTo({
					url: '/pages/relateMe/index'
				})
				break;
			case '服务协议':
				uni.navigateTo({
					url: '/pages/dealAgreement/index'
				})
				break;
			case '退出登录':
				uni.navigateTo({
					url: '/pages/login/login'
				})
				removeToken()
				uni.removeStorageSync('roles')
				break;
		}
	}
</script>

<style lang="less" scoped>
	@import "/App.less";

	.user-mine {
		height: 100vh;
		width: 100%;
		background-color: #F6F8FA;
		overflow: hidden;

		.background {
			height: 40vh;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-image: url('/punlic/image/mine/background.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
		}

		.top-banner {
			height: 88rpx;
			width: 100%;
			opacity: 0;
		}

		.info {
			width: inherit;
			height: inherit;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			padding: 0 28rpx;

			.user {
				width: inherit;
				height: 268rpx;
				display: flex;
				align-items: center;

				.user-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.user-info {

					.user-name {
						font-size: 34rpx;
						font-weight: bold;
						color: #000;
						margin-bottom: 10rpx;
						display: flex;
						align-items: center;
						span{
							font-weight: 400;
							font-size: 27rpx;
							color: #333;
							width: 120rpx;
						}
						
					}
					.span{
						font-size: 26rpx;
						font-weight: 400;
						color: #8b8b8b ;
						margin-bottom: 10rpx;
						display: flex;
						align-items: center;
						span{
							font-weight: 400;
							font-size: 27rpx;
							width: 120rpx;
						}
					}

					.user-phone {
						font-size: 24rpx;
						color: #8b8b8b ;
						display: flex;
						align-items: center;
						span{
							font-weight: 400;
							font-size: 27rpx;
							width: 120rpx;
						}
					}
					
				}
			}

			.company {
				height: 88rpx;
				width: 630rpx;
				margin: auto;
				padding: 24rpx;
				border-radius: 24rpx 24rpx 0 0;
				background-color: #5289FA;
				font-size: 28rpx;
				color: #fff;
			}

			.more {
				width: 100%;
				min-height: 70vh;
				background-color: #fff;
				border-radius: 24rpx;
				padding: 10rpx 30rpx;

				.more-item {
					height: 102rpx;
					width: 100%;
					.inline_space_between();

					.item-left {
						display: flex;
						align-items: center;

						.item-icon {
							margin-right: 20rpx;
						}

						.item-label {
							font-size: 30rpx;
						}
					}
				}
			}
		}

	}
</style>